<template>
  <div class="sdy-category">
    <SdyHeader title="啥都有分类页" back></SdyHeader>
    <div class='slide' ref='slide'>
      <div class='inner'
      ref='inner'
       :style="{top:posY + 'px'}"
       @touchstart='startHandler' 
       @touchmove='moveHandler'
       @touchend='endHandler'
       >
        <van-sidebar v-model="index" @change='clickHandler' >
          <van-sidebar-item v-for='item in cateList' :title="item" />
        </van-sidebar>
      </div>
    </div>
    <div class='content'>
      <div class='item' v-for='item in goodsList' :key="item.index">
        <p class="title">{{item.brand}}</p>
        <ul>
          <li v-for='t in item.list' :key="t.proid">
            <img :src="t.img1" alt="">
            <span>名字</span>
            </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import slider from 'vant/lib/slider'
//产品分类接口文档
import {categoryListApi,cateBrandListApi,categoryBrandGoodsListApi} from '@/api/goods'
import {ref,computed, onMounted} from 'vue'

//导入相关ts接口
import type{MyCateBrandGoodsItem}from '@/config/interface'

//准备数据 表示当前触发的导航
const index = ref<number>(0)

const startY = ref<number>(0)
const moveY = ref<number>(0)
const startTop = ref<number>(0)
const posY = ref<number>(0)
const inner = ref<HTMLDivElement | null>(null)
const slide = ref<HTMLDivElement | null>(null)


//分类列表数组
const cateList = ref<string[]>([])

//鼠标按下的事件
const startHandler = (e:TouchEvent) =>{
// console.log(e)
startY.value = e.touches[0].clientY
// console.log(startY.value)
startTop.value = (inner.value as HTMLElement).offsetTop
}
//鼠标移动事件
const moveHandler = (e:TouchEvent)=>{
  // 光标初始位置
moveY.value = e.touches[0].clientY - startY .value
//随着移动计算posY的值
  posY.value = moveY.value + startTop.value
  //判断边界值
  if(posY.value >= 100) posY.value = 100
  if(
    posY.value <= 
  -(inner.value as HTMLElement).offsetHeight - 
  -(slide.value as HTMLElement).offsetHeight - 100
  )posY.value = 
  -(inner.value as HTMLElement).offsetHeight - 
  -(slide.value as HTMLElement).offsetHeight - 100
}
const endHandler = ()=> {
  moveY.value = 0
  //回弹
  if(posY.value >= 0) posY.value = 0
  if(
    posY.value <= 
  -(inner.value as HTMLElement).offsetHeight - 
  -(slide.value as HTMLElement).offsetHeight
  )posY.value = 
  -(inner.value as HTMLElement).offsetHeight - 
  -(slide.value as HTMLElement).offsetHeight
}

//准备一个渲染右侧内容的数组
const goodsList = ref<MyCateBrandGoodsItem[]>([])

//准备一个根据当前分类请求分类内所有相关数据的方法
const getGoodsList = async (cate:string)=>{
  //1根据cate请求回来的品牌列表
    const brandList = await cateBrandListApi(cate)
  // 2.根据品牌列表内的 所有内容 去请求商品列表
    const list: Promise<any>[] = []
    brandList.data.forEach((item:{brand:string})=>{
      list.push(categoryBrandGoodsListApi({category:cate,brand:item.brand}))
    })
    const goods = await Promise.all(list)
    // console.log(goods)
    //3组装数据
    const goodList:MyCateBrandGoodsItem[] = []
    brandList.data.forEach((item:{brand:string},index:number)=>{
      goodList.push({
        cate,
        brand:item.brand,
        list:goods[index].data
      })
    })
    // console.log(goodList)
    goodsList.value = goodList
}

//导航切换事件
const clickHandler = async (index: number)=>{
  const cate = cateList.value[index]
  getGoodsList(cate)
  // const brandList = await cateBrandListApi(cate)
  // console.log(brandList)

  // const list: Promise<any>[] = []
  // brandList.data.forEach((item:{brand:string})=>{
  //   list.push(categoryBrandGoodsListApi({category:cate,brand:item.brand}))
  // })
  // const res = await Promise.all(list)
  // console.log(res)
}
onMounted(async ()=>{
  const res = await categoryListApi()
  cateList.value = res.data

  //渲染完毕后
  getGoodsList(res.data[0])
})

</script>

<style scoped lang="scss">
.sdy-category{
  height:100%;
  display: flex;

  > .slide{
    height:100%;
    width: 80px;
    overflow: auto;
    position: relative;
    > .inner{
      position:absolute;
      left: 0;
    }

  }
  > .content {
    flex: 1;
    overflow-y: auto;

    > .item{
      > .title{
      height: 30px;
      font-weight: 700px;
    }
    > ul {
      display: flex;
      box-sizing: border-box;
      padding:10px;
      justify-content:space-around;
      > li{
        display: flex;
        flex-direction: column;
        align-items: center;
        > img{
          width: 50px;
          height: 50px;
          display: block;
        }
      }
    }
    }
  }
}
</style>
